<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_408825_9pecp3wxz7z7u8fr.css"/>
		<link rel="stylesheet" type="text/css" href="css/xxPublic.css"/>
		<link rel="stylesheet" type="text/css" href="css/cart.css"/>
	</head>
	<body>
		<footer class="footerBox">
			<a href="#">
				<i class="iconfont icon-index"></i>
				<span>首页</span>
			</a>
			<a href="#">
				<i class="iconfont icon-cubes"></i>
				<span>线下服务</span>
			</a>
			<a href="#">
				<i class="iconfont icon-heart"></i>
				<span>收藏</span>
			</a>
			<a href="#" class="active">
				<i class="iconfont icon-cart"></i>
				<span>购物车</span>
			</a>
			<a href="#">
				<i class="iconfont icon-juxing-"></i>
				<span>装饰</span>
			</a>
			<a href="#">
				<i class="iconfont icon-user"></i>
				<span>我的</span>
			</a>
		</footer>
		<div class="cartBox">
			<div class="cartCont mb10">
				<p class="activityTit">
					<em>满赠</em>
					已购满300.00元，可减50元
				</p>
				<ul class="cartList">
					<li>
						<span class="chooseIcon singleChoose"></span>
						<div class="goodsInfo">
							<span class="goodsImg"><img src="images/colleImg02.jpg"/></span>
							<div class="goodsCon">
								<p>iphone7/7plus 128g  移动／联通／电信三网通用</p>
								<div class="goodFlex mb10">
									<span class="goodCell2 weight">重量：0.99kg</span>
									<span class="goodCell spec">选规格&nu;</span>
								</div>
								<div class="goodFlex">
									<span class="goodCell2 price">&yen;5999.00</span>
									<div class="goodCell count">
										<button class="minus">-</button>
										<input type="number" value="1" class="num" />
										<button class="add">+</button>
									</div>
								</div>
							</div>
						</div>
						<div class="delete">
							<span>删除</span>
						</div>
					</li>
					<li>
						<span class="chooseIcon singleChoose"></span>
						<div class="goodsInfo">
							<span class="goodsImg"><img src="images/colleImg02.jpg"/></span>
							<div class="goodsCon">
								<p>iphone7/7plus 128g  移动／联通／电信三网通用</p>
								<div class="goodFlex mb10">
									<span class="goodCell2 weight">重量：0.99kg</span>
									<span class="goodCell spec">选规格&nu;</span>
								</div>
								<div class="goodFlex">
									<span class="goodCell2 price">&yen;5999.00</span>
									<div class="goodCell count">
										<button class="minus">-</button>
										<input type="number" value="1" class="num" />
										<button class="add">+</button>
									</div>
								</div>
							</div>
						</div>
						<div class="delete">
							<span>删除</span>
						</div>
					</li>
				</ul>
				<div class="activityAccount">
					<div class="a_chooseAll">
						<span class="chooseIcon aChoose"></span>&nbsp; 全选
						&nbsp;&nbsp;<span>共:2件</span>
					</div>
					<div class="a_account" align="right">
						合计：<span class="price">&yen;5999.00</span>
					</div>
				</div>
			</div>
			
			<div class="cartCont mb10">
				<p class="activityTit">
					<em>满赠</em>
					已购满300.00元，可减50元
				</p>
				<ul class="cartList">
					<li class="">
						<span class="chooseIcon singleChoose"></span>
						<div class="goodsInfo">
							<span class="goodsImg"><img src="images/colleImg02.jpg"/></span>
							<div class="goodsCon">
								<p>iphone7/7plus 128g  移动／联通／电信三网通用电信三网通用电信三网通用电信三网通用电信三网通用电信三网通用</p>
								<div class="goodFlex mb10">
									<span class="goodCell2 weight">重量：0.99kg</span>
									<span class="goodCell spec">选规格&nu;</span>
								</div>
								<div class="goodFlex">
									<span class="goodCell2 price">&yen;5999.00</span>
									<div class="goodCell count">
										<button class="minus">-</button>
										<input type="number" value="1" class="num" />
										<button class="add">+</button>
									</div>
								</div>
							</div>
						</div>
						<div class="delete">
							<span>删除</span>
						</div>
					</li>
					<li>
						<span class="chooseIcon singleChoose"></span>
						<div class="goodsInfo">
							<span class="goodsImg"><img src="images/colleImg02.jpg"/></span>
							<div class="goodsCon">
								<p>iphone7/7plus 128g  移动／联通／电信三网通用</p>
								<div class="goodFlex mb10">
									<span class="goodCell2 weight">重量：0.99kg</span>
									<span class="goodCell spec">选规格&nu;</span>
								</div>
								<div class="goodFlex">
									<span class="goodCell2 price">&yen;5999.00</span>
									<div class="goodCell count">
										<button class="minus">-</button>
										<input type="number" value="1" class="num" />
										<button class="add">+</button>
									</div>
								</div>
							</div>
						</div>
						<div class="delete">
							<span>删除</span>
						</div>
					</li>
				</ul>
				<div class="activityAccount">
					<div class="a_chooseAll">
						<span class="chooseIcon aChoose"></span>&nbsp; 全选
						&nbsp;&nbsp;<span>共:2件</span>
					</div>
					<div class="a_account" align="right">
						合计：<span class="price">&yen;5999.00</span>
					</div>
				</div>
			</div>
			<div class="cartCont mb10">
				<p class="activityTit">
					<em>满赠</em>
					已购满300.00元，可减50元
				</p>
				<ul class="cartList">
					<li class="">
						<span class="chooseIcon singleChoose"></span>
						<div class="goodsInfo">
							<span class="goodsImg"><img src="images/colleImg02.jpg"/></span>
							<div class="goodsCon">
								<p>iphone7/7plus 128g  移动／联通／电信三网通用电信三网通用电信三网通用电信三网通用电信三网通用电信三网通用</p>
								<div class="goodFlex mb10">
									<span class="goodCell2 weight">重量：0.99kg</span>
									<span class="goodCell spec">选规格&nu;</span>
								</div>
								<div class="goodFlex">
									<span class="goodCell2 price">&yen;5999.00</span>
									<div class="goodCell count">
										<button class="minus">-</button>
										<input type="number" value="1" class="num" />
										<button class="add">+</button>
									</div>
								</div>
							</div>
						</div>
						<div class="delete">
							<span>删除</span>
						</div>
					</li>
					<li>
						<span class="chooseIcon singleChoose"></span>
						<div class="goodsInfo">
							<span class="goodsImg"><img src="images/colleImg02.jpg"/></span>
							<div class="goodsCon">
								<p>iphone7/7plus 128g  移动／联通／电信三网通用</p>
								<div class="goodFlex mb10">
									<span class="goodCell2 weight">重量：0.99kg</span>
									<span class="goodCell spec">选规格&nu;</span>
								</div>
								<div class="goodFlex">
									<span class="goodCell2 price">&yen;5999.00</span>
									<div class="goodCell count">
										<button class="minus">-</button>
										<input type="number" value="1" class="num" />
										<button class="add">+</button>
									</div>
								</div>
							</div>
						</div>
						<div class="delete">
							<span>删除</span>
						</div>
					</li>
					<li>
						<span class="chooseIcon singleChoose"></span>
						<div class="goodsInfo">
							<span class="goodsImg"><img src="images/colleImg02.jpg"/></span>
							<div class="goodsCon">
								<p>iphone7/7plus 128g  移动／联通／电信三网通用</p>
								<div class="goodFlex mb10">
									<span class="goodCell2 weight">重量：0.99kg</span>
									<span class="goodCell spec">选规格&nu;</span>
								</div>
								<div class="goodFlex">
									<span class="goodCell2 price">&yen;5999.00</span>
									<div class="goodCell count">
										<button class="minus">-</button>
										<input type="number" value="1" class="num" />
										<button class="add">+</button>
									</div>
								</div>
							</div>
						</div>
						<div class="delete">
							<span>删除</span>
						</div>
					</li>
				</ul>
				<div class="activityAccount">
					<div class="a_chooseAll">
						<span class="chooseIcon aChoose"></span>&nbsp; 全选
						&nbsp;&nbsp;<span>共:2件</span>
					</div>
					<div class="a_account" align="right">
						合计：<span class="price">&yen;5999.00</span>
					</div>
				</div>
			</div>
		</div>
		
		<div class="totalBox mb10">
			<div class="chooseAll">
				<span class="chooseIcon allChoose"></span>&nbsp; 全选
			</div>
			<div class="account" align="right">
				合计：<span class="price">&yen;5999.00</span>
				<button class="totalBtn">去结算(<em class="totalNum">1</em>)</button>
			</div>
		</div>
		
		<div id="footerHeight"></div>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(function(){
				//获取底部导航条的高度，赋值给div作为占位
				var footHeight = $('.footerBox').height();
				var totalboxHeight = $('.totalBox').height();
				$('#footerHeight').height(footHeight+totalboxHeight);
				$('.totalBox').css('bottom',footHeight);
				
				/*
				 * 拖动 删除
				 */
				var _li = $('.cartList li');
				var start;	//拖动开始位置
				var delta;	//拖动坐标
				_li.on('touchstart',function(e){
					var touches = event.touches[0];
					start={
						x:touches.pageX,		//横坐标
						y:touches.pageY		//纵坐标
					}
				});
				_li.on('touchmove',function(e){
					var touches = event.touches[0];
					delta = {
						x:touches.pageX - start.x,
						y:touches.pageY - start.y
					}
					
					// 横向位移大于纵向位移，阻止纵向滚动
					if(Math.abs(delta.x) > Math.abs(delta.y)){
						event.preventDefault();
					}
				});
				
				_li.on('touchend',function(e){
					var diffX = e.changedTouches[0].pageX - start.x;
					if(diffX < -40){
						for (var i=0; i<_li.length; i++) {
							_li.eq(i).removeClass('deleteState');
						}
						$(this).addClass('deleteState');
					}else{
						$(this).removeClass('deleteState');
					}
				});
				
				var singleChoose_len = $('.singleChoose').length;	//所有商品的行数
				var aChoose_len = $('.aChoose').length;				//活动个数
//				console.log(aChoose_len);
				var aNum,num;
				//单个选中
				$('.cartList').each(function(){
					var parentList = $(this);
					var singleChoose = parentList.find('.singleChoose');//获取本列表下的单选项
					var single_len = singleChoose.length;
					
					var siblings_achoose = parentList.siblings('.activityAccount').find('.aChoose');
					$(this).on('click','.singleChoose',function(){
						$(this).stop().toggleClass('choosed');
						
						if($(this).hasClass('choosed')){
							num=0;
							for (var j=0; j<single_len; j++) {
								if(singleChoose.eq(j).hasClass('choosed')){
									num++;
									if(num == single_len){	//单个活动所有商品都选中，对应 '部分全选' 选中
										aNum=0;
										siblings_achoose.stop().addClass('choosed');
										for(var i=0; i<aChoose_len; i++){		//循环检查每个活动的全选是否都选中
											if($('.aChoose').eq(i).hasClass('choosed')){
												aNum++;
		//										console.log(aNum);
												if(aNum==aChoose_len){			//选中个数=活动全选的个数，即全部都选中
													$('.allChoose').addClass('choosed');
												}
											}
										}
									}
								}
							}
					}else{
							parentList.siblings('.activityAccount').find('.aChoose').stop().removeClass('choosed');
							$('.allChoose').removeClass('choosed');
					}
					});
				});
				
				//部分全选
				var all =0;
				$('.aChoose').on('click',function(){
					$(this).stop().toggleClass('choosed');
					var siblingList = $(this).parents('.activityAccount').siblings('.cartList');
					var singleChoose = siblingList.find('.singleChoose');
					if($(this).hasClass('choosed')){
//						all++;
						all=0;
						for(var i=0; i<aChoose_len; i++){		//循环检查每个活动的全选是否都选中
							if($('.aChoose').eq(i).hasClass('choosed')){
								all++;
//								console.log(all);
								if(all==aChoose_len){			//选中个数=活动全选的个数，即全部都选中
									$('.allChoose').addClass('choosed');
								}
							}
						}
//						console.log(all);
//						if(all==aChoose_len){		//所有活动都全选中了，总的全选即选中
//							$('.allChoose').stop().addClass('choosed');
//						}
						for (var i=0; i<singleChoose.length; i++) {
							singleChoose.eq(i).addClass('choosed');
						}
					}else{
						all--;
						$('.allChoose').stop().removeClass('choosed');		//去掉总的全选的选中状态
						for (var i=0; i<singleChoose.length; i++) {
							singleChoose.eq(i).removeClass('choosed');
						}
					}
					
				});
				
				//全选中
				$('.allChoose').on('click',function(){
					$(this).stop().toggleClass('choosed');
					var chooseIcon = $('.chooseIcon');
					if($(this).hasClass('choosed')){
						all = aChoose_len;
						aNum = singleChoose_len;
						for (var i=0; i<chooseIcon.length; i++) {
							chooseIcon.eq(i).addClass('choosed');
						}
					}else{
						all =0;
						aNum = 0;
						for (var i=0; i<chooseIcon.length; i++) {
							chooseIcon.eq(i).removeClass('choosed');
						}
					}
				});
			});
			
		</script>
	</body>
</html>
